<template>
  <div>
    <Row :space="9">
      <Cell width="14">
        <div class="h-panel">
          <div class="h-panel-bar">
            <span class="h-panel-title">平台设置</span>
            <span class="h-panel-right"><span class="link" @click="platformShow">展开/收缩</span></span>
          </div>
          <div class="h-panel-body">
            <Form ref="platform" :model="platformForm" mode="twocolumn">
              <div v-show="isPlatformShow">
                <FormItem label="平台选择" prop="roleId" single>
                  <Cell width="22">
                    <Select v-model="platformForm.id" :datas="platformList" @change="platformChange"></Select>
                  </Cell>
                  <Cell width="2">
                    <Button no-border @click="platformDelete">删除</Button>
                  </Cell>
                </FormItem>
                <FormItem label="平台名称" prop="platformName">
                  <Input type="text" v-model="platformForm.platformName" />
                </FormItem>
                <FormItem label="工作目录" prop="workDir">
                  <Input type="text" v-model="platformForm.workDir" />
                </FormItem>
                <FormItem label="平台域名" prop="baseUrl">
                  <Input type="text" v-model="platformForm.baseUrl" />
                </FormItem>
                <FormItem label="Cookie" prop="cookies">
                  <Input type="text" v-model="platformForm.cookies" />
                </FormItem>
                <FormItem label="Header" prop="headers" single>
                  <Input type="text" v-model="platformForm.headers" />
                </FormItem>
                <FormItem label="扩展数据" prop="extends" single>
                  <Textarea type="text" v-model="platformForm.extends" rows="5" />
                </FormItem>
              </div>
              <FormItem label="接口选择" prop="id" single>
                <Cell width="22">
                  <Select v-model="apiForm.id" :datas="apiFormList" @change="apiFormChange"></Select>
                </Cell>
                <Cell width="2">
                  <Button no-border @click="apiFormDelete">删除</Button>
                </Cell>
              </FormItem>
              <FormItem label="接口文件" prop="filePath" single>
                <Input type="text" v-model="apiForm.filePath" />
              </FormItem>
              <FormItem label="接口名称" prop="apiName">
                <Input type="text" v-model="apiForm.apiName" />
              </FormItem>
              <FormItem label="别名" prop="useName">
                <Input type="text" v-model="apiForm.useName" />
              </FormItem>
              <FormItem label="接口地址" prop="apiUrl">
                <Input type="text" v-model="apiForm.apiUrl" />
              </FormItem>
              <FormItem label="请求方式" prop="requestMethod">
                <Select v-model="apiForm.requestMethod" :datas="requestMethodList"></Select>
              </FormItem>
              <FormItem label="数据类型" prop="requestType">
                <Select v-model="apiForm.requestType" :datas="requestTypeList"></Select>
              </FormItem>

              <FormItem label="操作" single>
                <Button icon="ri-send-plane-line" text-color="blue" @click="sendHttp">发送</Button>
                <Space :width="10" />
                <Button icon="h-icon-trash" text-color="yellow" @click="cleanResp">清空响应</Button>
                <Space :width="10" />
                <Button icon="ri-openai-fill" text-color="primary" @click="aiRecognitionApi">AI识别接口</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </Cell>
      <Cell width="10">
        <div class="h-panel">
          <!-- <div class="h-panel-bar">
            <span class="h-panel-title">输入/输出</span>
          </div> -->
          <div class="h-panel-body">
            <Form ref="platform" :model="apiForm" mode="twocolumn">
              <FormItem label="请求体" prop="requestParams" single>
                <Textarea v-model="apiForm.requestParams" :style="'height:'+this.height*0.3+'px'" />
              </FormItem>
              <FormItem label="响应体" prop="responseBody" single>
                <Textarea v-model="apiForm.responseBody" rows="10" :style="'height:'+this.height*0.7+'px'" />
              </FormItem>
            </Form>
          </div>
        </div>
      </Cell>
    </Row>
  </div>
</template>

<script>
  import { confirm, message } from 'heyui';

  export default {
    created () {
      this.handleResize();
    },
    mounted () {
      window.addEventListener('resize', this.handleResize)
      this.getPlatformList();
      this.getApiFormList();
    },
    data () {
      return {
        width: 0,
        height: 0,
        isPlatformShow: true,
        requestMethodList: [
          { "label": "GET", "value": "GET" },
          { "label": "POST", "value": "POST" },
          { "label": "PUT", "value": "PUT" },
          { "label": "DELETE", "value": "DELETE" }
        ],
        requestTypeList: [
          { "label": "application/json", "value": "application/json" },
          { "label": "application/x-www-form-urlencoded", "value": "application/x-www-form-urlencoded" },
          { "label": "multipart/form-data", "value": "multipart/form-data" },
          { "label": "text/html", "value": "text/html" }, { "label": "text/xml", "value": "text/xml" }
        ],
        platformForm: {},
        apiForm: {},
        platformList: [],
        apiFormList: [],
      };
    },
    methods: {
      platformShow () {
        this.isPlatformShow = !this.isPlatformShow;
      },
      platformDelete () {
        confirm({
          content: '确定删除？',
          onConfirm: () => {
            this.$delete("/apiplatforminfo/" + this.platformForm.id).then(res => {
              if (res.data.code == this.$success) {
                this.getPlatformList();
                this.getApiFormList();
              }
            });
          }
        });
      },
      apiFormDelete () {
        confirm({
          content: '确定删除？',
          onConfirm: () => {
            this.$delete("/apirequestconfig/" + this.apiForm.id).then(res => {
              if (res.data.code == this.$success) {
                this.getPlatformList();
                this.getApiFormList();
              }
            });
          }
        });
      },

      cleanResp () {
        this.apiForm.responseBody = "{}";
      },
      handleResize () {
        this.width = document.documentElement.clientWidth - 20;
        this.height = document.documentElement.clientHeight - 300;
      },
      getPlatformList () {
        this.$post("/apiplatforminfo/list", { page: { current: 1, size: 1000 } }).then(res => {
          if (res.data.code == this.$success) {
            this.platformList = res.data.data.rows;
          } else {
            message.error(res.data.msg);
          }
        })
      },
      getApiFormList () {
        this.$post("/apirequestconfig/list", { vars: { "a.platform_id": this.platformForm.id }, page: { current: 1, size: 1000 } }).then(res => {
          if (res.data.code == this.$success) {
            this.apiFormList = res.data.data?.rows || [];
          } else {
            this.apiFormList = [];
            message.error(res.data.msg);
          }
        })
      },
      platformChange (data) {
        this.$get("/apiplatforminfo/" + data.value).then(res => {
          if (res.data.code == this.$success) {
            this.platformForm = res.data.data;
            this.getApiFormList();
            this.apiForm = {}
          } else {
            message.error(res.data.msg);
          }
        })
      },
      apiFormChange (data) {
        this.$get("/apirequestconfig/" + data.value).then(res => {
          if (res.data.code == this.$success) {
            this.apiForm = res.data.data;
          } else {
            message.error(res.data.msg);
          }
        })
      },
      aiRecognitionApi () {
        this.$post("/apirequestconfig/aiRecognitionApi", { platformForm: this.platformForm, apiForm: this.apiForm }).then(res => {
          if (res.data.code == this.$success) {
            this.apiForm = { ...this.apiForm, ...res.data.data };
          } else {
            message.error(res.data.msg);
          }
        })
      },
      sendHttp () {
        if (!this.apiForm.apiName || !this.apiForm.apiUrl) {
          message.error("接口名称和接口地址不能为空");
          return
        }
        this.$post("/apirequestconfig/send", { platformForm: this.platformForm, apiForm: this.apiForm }).then(res => {
          try {
            this.apiForm.responseBody = JSON.stringify(res.data.data, null, '\t');
          } catch (error) {
            this.apiForm.responseBody = res.data.data;
          }
          this.getPlatformList();
          this.getApiFormList();
        })
      },
    },
    deactivated () {
      this.$destroy(true);
      window.removeEventListener('resize', this.handleResize);
    },
  };
</script>